@mixin button($style: tertiary, $size: md) {
  display: flex;
  align-items: center;
  box-sizing: border-box;

  @if $style == primary {
    background-color: #f26826;

    span {
      color: var(--neutral-100);
    }
  }

  @if $style == tertiary {
    background-color: var(--neutral-100);
    span {
      color: var(--neutral-10);
    }
  }

  @if $size == sm {
    padding: 0 0.375rem;
    height: 1.75rem;

    gap: 0.125rem;

    border-radius: var(--rounded-md);
    border: var(--border-outer);

    span {
      @include body-small;

      padding: 0 0.125rem;
    }
  } @else if $size == md {
    height: 2.5rem;

    padding: 0 0.5rem;
    border-radius: var(--rounded-md);

    span {
      @include label-large;
      padding: 0 0.25rem;
    }
  }

  @if $style == icon {
    height: 2.5rem;
    width: 2.5rem;
    border-radius: var(--rounded-full);
  }

  @include hover;
}

.timeline-container .topic-timeline .topic-admin-menu-button .btn {
  height: 2.5rem;
}

@mixin badge($style: neutral) {
  @include label-small;

  position: relative;

  display: flex;
  align-items: center;

  height: 1rem;
  padding: 0 0.25rem;

  color: var(--neutral-10);

  background-color: var(--neutral-95);
  border-radius: var(--rounded-sm);
  overflow: hidden;

  @include hover;
}

.button--primary {
  @include button($style: primary);
}

.button--tertiary {
  @include button($style: tertiary);
}

.btn-icon {
  @include button($style: icon);
}

.select-kit.single-select.dropdown-select-box .select-kit-header.btn-icon {
  @include button($style: icon);

  .select-kit-header-wrapper {
    justify-content: center;
  }
}

.btn-text,
.btn-icon-text {
  @include button($style: neutral);
}
